import React from "react";
import { Input, Select, Button } from "antd";
import searchStyle from "./searchPart.module.scss";
import { SearchOutlined, RedoOutlined } from "@ant-design/icons";
import { useDispatch, useSelector } from "react-redux";
import { setSearch, getArticles } from "@/store/slices/articleSlice.js";

export default function ArticleSearch(props) {
  const { cateEnumList, tagEnumList } = props;
  const dispatch = useDispatch();
  const { searchParam } = useSelector((state) => state.article);
  //   console.log(searchParam, "paramssearch");

  // 处理参数
  const handleSearch = (e, key) => {
    console.log(e, key, "key");
    if (key === "name") {
      dispatch(
        setSearch({
          ...searchParam,
          title: e.target.value,
        })
      );
    } else {
      dispatch(
        setSearch({
          ...searchParam,
          [key]: e,
        })
      );
    }
  };

  // 重置search参数
  const handleEmpty = () => {
    dispatch(
      setSearch({
        title: null,
        tagId: null,
        typeId: null,
        status: null,
      })
    );
  };

  // 提交search参数进行查找
  const submitSearch = () => {
    dispatch(getArticles(searchParam));
  };
  return (
    <div className={searchStyle.searchPart}>
      <div className={searchStyle.item}>
        <div className={searchStyle.label}>文章名称</div>
        <Input
          placeholder="请输入文章名称"
          value={searchParam.title}
          onChange={(e) => handleSearch(e, "name")}
          style={{
            width: 140,
          }}
        ></Input>
      </div>
      <div className={searchStyle.item}>
        <div className={searchStyle.label}>标签名</div>
        <Select
          onChange={(e) => handleSearch(e, "tagId")}
          value={searchParam.tagId}
          fieldNames={{
            label:"enumText",
            value:"enumCode"
          }}
          style={{
            width: 120,
          }}
          options={tagEnumList || []}
        />
      </div>
      <div className={searchStyle.item}>
        <div className={searchStyle.label}>分类名</div>
        <Select
          onChange={(e) => handleSearch(e, "typeId")}
          value={searchParam.typeId}
          fieldNames={{
            label:"enumText",
            value:"enumCode"
          }}
          style={{
            width: 120,
          }}
          options={cateEnumList||[]}
        />
      </div>
      <div className={searchStyle.item}>
        <div className={searchStyle.label}>发布状态</div>
        <Select
          onChange={(e) => handleSearch(e, "status")}
          value={searchParam.status}
          style={{
            width: 120,
          }}
          options={[
            {
              value: -1,
              label: "下架",
            },
            {
              value: 0,
              label: "待审核",
            },
            {
              value: 1,
              label: "发布",
            },
            {
              value: 2,
              label: "草稿",
            },
          ]}
        />
      </div>
      <div className={searchStyle.item}>
        <Button type="primary" icon={<SearchOutlined />} onClick={submitSearch}>
          查找
        </Button>
        <Button
          icon={<RedoOutlined />}
          style={{ marginLeft: "10px" }}
          onClick={handleEmpty}
        >
          重置
        </Button>
      </div>
    </div>
  );
}
